<template>
  <div style="width: 100%; height: 100%">
    <div class="login_right">
      <div class="right-title-content">
        <el-steps :space="150" :active="active" align-center>
          <el-step title="确认账号" @click.native="changeActive(1)"></el-step>
          <el-step title="重置密码" @click.native="changeActive(2)"></el-step>
          <el-step title="重置成功" @click.native="changeActive(3)"></el-step>
        </el-steps>
      </div>
      <div class="right-content" v-if="active == 1">
        <el-form ref="resetForm" :model="resetForm" :rules="rules">
          <el-form-item prop="phonenumber">
            <el-input
              v-model="resetForm.phonenumber"
              type="text"
              auto-complete="off"
              placeholder="手机号"
              class="username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="remark">
            <el-input
              v-model="resetForm.remark"
              auto-complete="off"
              placeholder="验证码"
              style="width: 63%"
              class="code"
              @keyup.enter.native="getPhoneCode"
            ></el-input>
            <el-button
              v-show="show"
              size="large"
              style="width: 34%; margin-left: 3%"
              class="getCode"
              type="primary"
              @click="getPhoneCode"
              >获取验证码</el-button
            >
            <el-button
              v-show="!show"
              size="large"
              @click="getPhoneCode"
              style="width: 34%; margin-left: 3%"
              type="primary"
              >{{ count }} s</el-button
            >
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="
                width: 100%;
                height: 40px;
                border-radius: 1px;
                background-color: #e60012;
              "
              @click="handleChange()"
            >
              <span style="color: white">确 认</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right-content" v-if="active == 2">
        <el-form ref="resetForm" :model="resetForm" :rules="rules">
          <el-form-item prop="password">
            <el-input
              v-model="resetForm.password"
              type="text"
              auto-complete="off"
              placeholder="新密码"
              class="username"
              show-password
            ></el-input>
          </el-form-item>
          <!--密码-->
          <el-form-item prop="pwd2">
            <el-input
              v-model="resetForm.pwd2"
              type="password"
              auto-complete="off"
              placeholder="确认密码"
              class="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="
                width: 100%;
                height: 40px;
                border-radius: 1px;
                background-color: #e60012;
              "
              @click.native.prevent="submitReset()"
            >
              <span style="color: #fff">确 认</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right-content" v-if="active == 3">
        <div class="complete">密码重置成功</div>

        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="
              width: 100%;
              height: 40px;
              border-radius: 1px;
              background-color: #e60012;
            "
            @click="goBack()"
          >
            <span style="color: #fff">返回登录</span>
          </el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import { getPhoneCode2, resetPwdByCaptcha } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkData = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("密码不能输入汉字!"));
        } else {
          callback();
        }
      }
      callback();
    };
    return {
      codeUrl: "",
      cookiePassword: "",
      resetForm: {
        phonenumber: "",
        password: "",
        remark: "",
      },
      rules: {
        phonenumber: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            type: "number",
            message: "手机号格式不正确",
            trigger: "blur",
            transform(value) {
              var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
              if (!phonereg.test(value)) {
                return false;
              } else {
                return Number(value);
              }
            },
          },
        ],
        remark: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        password: [
          { required: true, trigger: "blur", message: "请输入新密码" },
          {
            min: 8,
            max: 20,
            message: "密码长度在8到20个字符",
            trigger: "blur",
          },
          { validator: checkData, trigger: "blur" },
          {
            required: true,
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/,
            message: "需包含大小写字母、数字和特殊字符的三种",
            trigger: "blur",
          },
        ],
        pwd2: [{ validator: validatePass2, trigger: "blur" }],
      },

      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      active: 1, // 激活状态
      show: true, // 手机验证码发送时间
      count: "", //倒计时
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 获取手机验证码
    getPhoneCode() {
      // 获取验证码
      const TIME_COUNT = 60;
      if (this.resetForm.phonenumber !== "") {
        const phoneNo = this.resetForm.phonenumber + "";
        getPhoneCode2({ phoneNo: phoneNo }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message.success("验证码获取成功");
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
          // this.resData = res.list
        });
      } else {
        Message.error("请输入正确的手机号");
        // this.$message.error(res.msg);
      }
    },
    handleChange() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          this.active = 2;
        }
      });
    },
    submitReset() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          delete this.resetForm.pwd2;
          console.log(this.resetForm, "===");
          debugger;
          resetPwdByCaptcha(this.resetForm).then((res) => {
            if (res.code == 200) {
              this.active = 3;
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },

    changeActive(a) {
      console.log("a", a);
      this.active = a;
    },
    goBack() {
      // this.$parent.goBackLogin();
      // console.log(this.$parent);
      this.$emit("goBackLogin");
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
.login-form {
  .login_left {
    width: 300px;
    .left-title {
      margin: 40px 0px 0px 20px;
      width: 280px;
      height: 64px;
      font-size: 28px;
      font-family: Source Han Sans CN ExtraLight,
        Source Han Sans CN ExtraLight-ExtraLight;
      font-weight: ExtraLight;
      text-align: left;
      color: #ffffff;
      line-height: 40px;
      .title {
        margin: 5px;
        font-weight: 600;
      }
    }
  }
  /*右边的部分*/
  .login_right {
    width: 399px;
    margin-left: 60px;
    margin-top: 40px;
    padding: 0px 40px;
    img {
      border-radius: 4px;
      padding-bottom: 90px;
    }
    .right-title-content {
      margin-top: 80px;
      height: 80px;
      margin-left: -50px;
      width: 400px;
      // border-bottom: 1px solid #cccccc;
      .right-title {
        width: 150px;
        height: 50px;
        font-size: 24px;
        font-family: Source Han Sans CN Light, Source Han Sans CN Light-Light;
        font-weight: 400;
        text-align: center;
        color: #e60012;
        line-height: 40px;
        border-bottom: 2px solid #e60012;
      }
    }
    .right-content {
      width: 300px;
      height: 200px;
      padding-top: 30px;
    }
    .getCode {
      height: 42px;
    }
  }
  /*输入框的间距*/
  .el-input {
    height: 42px;
    border: 1px solid #cccccc;
    // border-top: 0px;
    // border-left: 0px;
    // border-right: 0px;
  }
}
::v-deep .el-input__inner {
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0);
  border: 0;
}

/*验证码*/
.login-code {
  width: 33%;
  height: 21px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  width: 105%;
  // height:36px;
  /*height: 1px;*/
  /* background-color: #1e1e1e;*/
}

.el-login-header {
  height: 5px;
  position: fixed;
  /* bottom: 250px;*/
  top: 10%;
  right: 33%;
  width: 70%;
  text-align: center;
  img {
    width: 30%;
  }
}

.username ::v-deep .el-input__inner {
  background: url("../assets/images/login/user.png") no-repeat left;
  background-size: 8%;
  margin-left: 10px;
  padding: 0px 38px; /*输入内容左右边距控制*/
}
.password ::v-deep .el-input__inner {
  background: url("../assets/images/login/pwd.png") no-repeat left;
  background-size: 8%;
  margin-left: 10px;
  padding: 0px 38px; /*输入内容左右边距控制*/
}
.code ::v-deep .el-input__inner {
  background: url("../assets/images/login/yzm.png") no-repeat left;
  background-size: 10%;
  margin-left: 10px;
  padding: 0px 38px; /*输入内容左右边距控制*/
}
.complete {
  height: 150px;
  width: 80%;
  margin: auto;
  background: url("../assets/images/login/complete.png") no-repeat center top;
  line-height: 200px;
  text-align: center;
  font-size: 18px;
}
// 修改步骤条样式
::v-deep .el-step__icon.is-text {
  border-radius: 0px;
}
::v-deep .el-step__head.is-finish {
  color: #e60012;
  border-color: #e60012;
}
::v-deep .el-step__head.is-finish .el-step__icon.is-text {
  color: #fff;
  border-color: #e60012;
  background-color: #e60012;
}
::v-deep .el-step__title.is-finish {
  color: #e60012;
}

::v-deep .el-step__head.is-process {
  color: #e60012;
  border-color: #e60012;
}
::v-deep .el-step__head.is-process .el-step__icon.is-text {
  color: #fff;
  border-color: #999999;
  background-color: #999999;
}
::v-deep .el-step__title.is-process {
  color: #999999;
}
</style>
